import React, { Component } from 'react'
import { Card, Button, Form, Input, Cascader, InputNumber, message, Select } from 'antd';
import { Link } from 'react-router-dom';
import { getCascadeAPI } from '../../apis/categoryAPI';
import { addGoodsAPI } from '../../apis/goodsAPI';
import MyUploader from './../../components/uploader'

const { TextArea } = Input;
const { Option } = Select
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
export default class addItem extends Component {
    state = {
        options: [],
        type: '',


    }
    getCascadeData = async () => {
        const res = await getCascadeAPI();
        console.log('getCascadeData()', res);
        this.setState({ options: res.data.data })
    }
    get optionsFilter() {
        return this.state.options.map(opt => {
            if (opt.children.length == 0) {
                opt.disabled = true
            }
            return opt
        })
    }
    casChange = (_, data) => {
        this.setState({ type: data[1].id })
    }
    onFinish = async (fieldValue) => {
        const { type } = this.state
        fieldValue.type = type
        fieldValue.imgSrc = this.upt.state.imgSrc
        console.log(fieldValue);
        const res = await addGoodsAPI(fieldValue)
        console.log('addGoodsAPI()', res);
        if (res.data.code) {
            message.success('添加成功')
        } else {
            message.error('添加失败')
        }
    }
    componentDidMount() {
        this.getCascadeData()
    }
    render() {

        return (
            <Card title="添加商品" extra={<Button ><Link to="/home/product/item/list">返回</Link></Button>} style={{ width: 800 }}>
                <Form {...layout} name="control-hooks" onFinish={this.onFinish}>
                    <Form.Item
                        name="name"
                        label="商品名称"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="title"
                        label="商品标题"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="price"
                        label="商品价格"

                    >
                        <InputNumber min={1} />
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="类型"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Cascader options={this.optionsFilter} placeholder="Please select" onChange={this.casChange} />
                    </Form.Item>
                    <Form.Item
                        name="imgSrc"
                        label="商品图片"

                    >
                        <MyUploader ref={upCom => this.upt = upCom}></MyUploader>
                    </Form.Item>
                    <Form.Item
                        name="msg"
                        label="商品描述"
                    >
                        <TextArea ></TextArea>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>


                    </Form.Item>
                </Form>
            </Card>
        )
    }
}
